<template>
  <div style="height:100%">
    <breadcrumb :breadList="breadList" :name="name" style="margin-bottom: 12px;">
      <div class="handle-box" slot="handleContent">
        <!-- <div class="handle-btn" v-if="currentType === 'create'">
          <a-button class="common-btn" @click="connectUser">关联用户</a-button>
        </div>
        <div class="handle-btn" v-if="currentType === 'modify'">
          <a-button class="common-btn" @click="updateUser">修改用户</a-button>
        </div> -->
      </div>
    </breadcrumb>
    <a-card class="card" title="维修人员基本信息" :bordered="false">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="维修人员姓名" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.name', {initialValue: currentPro.name, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="性别" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.sex', {initialValue: currentPro.sex, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="所属部门" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.personName', {initialValue: currentPro.department, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="人员编号" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input-number :disabled="disabled" v-decorator="['queryParam.personCode', {initialValue: currentPro.personCode, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="联系电话" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input-number :disabled="disabled" v-decorator="['queryParam.personTel', {initialValue: currentPro.tel, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="isShow">
          <div style="text-align:center;">
            <a-button class="common-btn" @click="submitProMessage">确定</a-button>
            <a-button @click="cancel" class="common-btn" style="margin-left:10px;">取消</a-button>
          </div>
        </a-row>
      </a-form>
    </a-card>
    <a-card class="card" title="维修人员历史工单" :bordered="false" v-if="$route.query.type === 'detail'">
      <a-table
        :columns="columns"
        :dataSource="loadData"
        bordered
        :pagination="false"
        :scroll="{ x: 800 }">
        <template slot="name" slot-scope="text, record">
          <p style="display:inline" @click="addPersonnelHistory('detail')">
            <a href="javascript:;">{{ record.name }}</a>
          </p>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import GlobalHeader from '@/components/GlobalHeader'
import Breadcrumb from '@/components/tools/Breadcrumb'
import Cascader from 'ant-design-vue/lib/cascader'
export default {
  name: 'AddProjects',
  components: {
    GlobalHeader,
    Breadcrumb,
    'a-cascader': Cascader
  },
  data () {
    return {
      name: '',
      breadList: [],
      disabled: false,
      isShow: true,
      queryParam: {},
      form: this.$form.createForm(this),
      currentType: '', // 当前页面所属
      currentPro: {}, // 当前产品详情
      loadData: [],
      headers: {
        authorization: 'authorization-text'
      },
      // 表头
      columns: [
        {
          title: '姓名',
          width: '6%',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        }, {
          title: '所属部门',
          width: '10%',
          dataIndex: 'department'
        }, {
          title: '性别',
          width: '6%',
          dataIndex: 'sex'
        }, {
          title: '人员编号',
          width: '10%',
          dataIndex: 'personCode'
        }, {
          title: '联系电话',
          width: '10%',
          dataIndex: 'tel'
        },
        {
          title: '当前状态',
          width: '10%',
          dataIndex: 'cunrrentStatus'
        },
        {
          title: '上次接单时间',
          width: '10%',
          dataIndex: 'lastTime'
        },
        {
          title: '累计接单量',
          width: '10%',
          dataIndex: 'totalNum'
        }
      ]
    }
  },
  created () {
    console.log('组建传值', this.type, this.statusCode)
    this.currentType = this.$route.query.type
    this.currentPro = JSON.parse(this.$route.query.proDetails)
    this.getBreadCrumb()
    this.getData()
    console.log('当前详情', this.currentType, this.currentPro)
    if (this.$route.query.type === 'detail') {
      this.disabled = true
      this.isShow = false
    } else {
      this.disabled = false
      this.isShow = true
    }
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
      switch (this.$route.query.type) {
        case 'detail':
          this.breadList[2].meta.title = '人员详情'
          break
        case 'modify':
          this.breadList[2].meta.title = '编辑人员'
          break
        default:
          this.breadList[2].meta.title = '添加人员'
          break
      }
    },
    onChange (value) {
      console.log(value)
    },
    handleChange (info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 上传成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    cancel () {
      const that = this
      this.$confirm({
        title: '是否确定取消，取消后数据将清空',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已取消'
          })
        }
      })
    },
    submitProMessage () {
      const that = this
      this.$confirm({
        title: '确认提交吗',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已提交'
          })
        }
      })
    },
    getData () {
      const data = [
        {
          name: '张三',
          department: '维修部',
          sex: '男',
          personCode: 'wx-001',
          tel: '18899999999',
          cunrrentStatus: '在职',
          lastTime: '2015-12-30',
          totalNum: '199'
        }, {
          name: '张三',
          department: '维修部',
          sex: '男',
          personCode: 'wx-001',
          tel: '18899999999',
          cunrrentStatus: '在职',
          lastTime: '2015-12-30',
          totalNum: '199'
        }, {
          name: '张三',
          department: '维修部',
          sex: '男',
          personCode: 'wx-001',
          tel: '18899999999',
          cunrrentStatus: '在职',
          lastTime: '2015-12-30',
          totalNum: '199'
        }, {
          name: '张三',
          department: '维修部',
          sex: '男',
          personCode: 'wx-001',
          tel: '18899999999',
          cunrrentStatus: '在职',
          lastTime: '2015-12-30',
          totalNum: '199'
        }, {
          name: '张三',
          department: '维修部',
          sex: '男',
          personCode: 'wx-001',
          tel: '18899999999',
          cunrrentStatus: '在职',
          lastTime: '2015-12-30',
          totalNum: '199'
        }, {
          name: '张三',
          department: '维修部',
          sex: '男',
          personCode: 'wx-001',
          tel: '18899999999',
          cunrrentStatus: '在职',
          lastTime: '2015-12-30',
          totalNum: '199'
        }
      ]
      this.loadData = data
    },
    connectUser () {
      this.$warning({
        title: '请输入正确的用户信息'
      })
    },
    updateUser () {
      const that = this
      this.$confirm({
        title: '用户一旦更改立即生效，请确认是否继续更改用户',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已提交'
          })
        }
      })
    },
    toSeeCount () {
      this.$warning({
        title: '当前无关联用户'
      })
    },
    downLoad () {
      this.$success({
        title: '下载成功，请本地打开查看'
      })
    },
    addPersonnelHistory (type) {
      this.$router.push({
        name: 'personnelHistory'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.spec-row {
  margin-left: -16px;
}
.spec-item {
  margin-bottom: 0px;
}
.spec-card {
  height: 56px;
}
</style>
